// capture.js

// 导入通用的 addLog 函数
import { addLog } from './log.js';

import { toggleDrawer } from './drawer.js';

// 获取 Canvas 元素，用于从视频中抓取帧
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 存储处理后的图像数据
const processedImages = [];

// 重写 unshift 方法，监听数组的变化
const originalUnshift = processedImages.unshift;
processedImages.unshift = function (...args) {
    // 调用原始 unshift 方法，将元素添加到数组
    const result = originalUnshift.apply(this, args);

    // 当新图像被添加到数组时，更新图像列表
    updateImageGallery();

    return result;
};

// 处理图像并发送请求的函数
function captureAndUploadImage(recoverProcessingState) {
    // 获取 video 元素
    const $videoElement = $('#camera');  // 使用 jQuery 获取视频元素

    if ($videoElement.length === 0) {
        console.error('未找到视频元素');
        return;
    }

    // 暂停视频播放，定格画面
    $videoElement[0].pause();

    // 设置 canvas 尺寸和视频流一致
    canvas.width = $videoElement[0].videoWidth;
    canvas.height = $videoElement[0].videoHeight;

    // 将视频帧绘制到 canvas 上
    ctx.drawImage($videoElement[0], 0, 0, canvas.width, canvas.height);

    // 获取图片的 Data URL（Base64 编码）
    const imageData = canvas.toDataURL('image/jpeg');

    // 创建 FormData 并添加图片数据
    const formdata = new FormData();
    formdata.append('file', dataURItoBlob(imageData), 'frame.jpg'); // 将 Base64 转为 Blob

    // 发送请求到服务器
    $.ajax({
        url: "https://rongrong.dianchuang.club:8080/api/upload",  // 请求地址
        type: "POST",  // 请求方式
        data: formdata,  // 要发送的数据
        processData: false,  // 不处理 data（因为 data 是 FormData 对象）
        contentType: false,  // 不设置 Content-Type，jQuery 会自动处理
        success: function (result) {
            console.log("图像成功返回");

            const $cameraContainer = $('#camera-container');

            if ($cameraContainer.length === 0) {
                console.error('未找到摄像头容器');
                return;
            }

            // 找到 cameraContainer 容器内类名为 .spinner (加载动画)元素删除
            $cameraContainer.find('.spinner').remove();

            // 将处理的图像显示在 video 标签上几秒钟
            displayImageOnVideo(result.base64);

            setTimeout(() => {
                // 恢复视频播放
                $videoElement[0].play();

                // 调用回调函数恢复防抖变量
                if (recoverProcessingState) {
                    recoverProcessingState();  // 通知 control.js 恢复防抖状态
                }
            }, 1000);
        },
        error: function (xhr, status, error) {
            console.error('请求失败:', error);

            addLog('调用绘画接口失败！')

            // 恢复视频播放，即使请求失败
            // $videoElement[0].play();
        }
    });
}

// 将图像显示在 video 元素上几秒钟
function displayImageOnVideo(base64Image) {
    const $cameraContainer = $('#camera-container');  // 使用 jQuery 获取摄像头容器

    if ($cameraContainer.length === 0) {
        console.error('未找到摄像头容器');
        return;
    }

    // 创建 img 元素，显示返回的图像
    const $imgElement = $('<img>')
        .attr('src', `data:image/png;base64,${base64Image}`)
        .addClass('temporary-image')  // 添加一个 class
        .css('opacity', 0);  // 初始状态：透明度为 0

    // 将图像添加到页面
    $cameraContainer.append($imgElement);

    // 渐变显示图像（从 0 到 1）
    setTimeout(() => {
        $imgElement.css({
            'transition': 'opacity 1s ease-in',  // 1秒内渐变
            'opacity': 1  // 设置为完全不透明
        });
    }, 10); // 等待图像添加后再开始过渡

    // 让图像显示几秒钟后移除
    setTimeout(() => {
        $imgElement.css({
            'transition': 'opacity 1s ease-out',  // 1秒内渐变消失
            'opacity': 0  // 渐变消失
        });

        // 过渡完成后移除图像
        setTimeout(() => {
            $imgElement.remove(); // 移除图像
        }, 1000); // 等待 1秒，确保过渡完成

        toggleDrawer('open')

        // 将处理后的图像数据添加到数组中
        processedImages.unshift(base64Image);  

        
    }, 5000); // 显示 5 秒钟
}

// 更新图片列表显示
function updateImageGallery() {
    // 获取图片列表容器
    const $imageGallery = $('#image-gallery');

    if ($imageGallery.length === 0) {
        console.error('未找到图片展示区域');
        return;
    }

    // 防止出现图片重叠的bug
    // 1. 禁用该 div 的垂直滚动
    $imageGallery.css('overflow-y', 'hidden');
    // 2. 设置该 div 的滚动位置为顶部
    $imageGallery.scrollTop(0);
    // 移动前删除之前所有图片上的 "New" 标签
    $imageGallery.find('.new-tag').remove();

    // 将现有图片向下移动
    const $existingImagesWrapper = $imageGallery.find('.captured-image-wrapper');
    // 遍历图片数组 
    const movePromises = $existingImagesWrapper.get().map(function (img, index) {
        const currentTop = $(img).position().top || 0; // 获取当前top值，若没有则为0

        return new Promise(resolve => {
            $(img).css({
                'top': `${currentTop + 165}px`,  // 原来的top值 + 165px
            });

            // 动画结束后调用 resolve，表示当前图片动画完成
            resolve();
        });
    });

    // 等待所有图片下移动画完成
    Promise.all(movePromises).then(() => {
        setTimeout(() => {
            // 在所有现有图像下方插入新图像
            const $newImage = $('<div>') // 用 div 包裹图像和删除按钮
                .addClass('captured-image-wrapper')  // 给容器加一个class
                .append($('<img>') // 创建新的图像
                    .attr('src', `data:image/png;base64,${processedImages[0]}`)  // 新图像的来源
                    .addClass('captured-image')  // 添加一个 class
                    .css('opacity', 0)  // 初始透明度为0
                    .on('pointerdown', function () {  // 添加点击事件
                        const $preview = $('<div>')
                            .css({
                                'position': 'fixed',
                                'top': 0,
                                'left': 0,
                                'width': '100%',
                                'height': '100%',
                                'background': 'rgba(0,0,0,0.9)',
                                'display': 'flex',
                                'justify-content': 'center',
                                'align-items': 'center',
                                'z-index': 9999
                            });

                        // 创建预览图片
                        const $previewImg = $('<img>')
                            .attr('src', this.src)
                            .css({
                                'max-width': '90%',
                                'max-height': '90%',
                                'object-fit': 'contain'
                            });

                        // 添加点击关闭功能
                        $preview.on('pointerdown', function () {  // 改为 pointerdown 事件
                            $(this).fadeOut(300, function () {
                                $(this).remove();
                            });
                        });

                        // 将预览图片添加到预览层
                        $preview.append($previewImg);

                        $('#camera-container').append($preview);
                        $preview.fadeIn(300);
                    }))
                .append(
                    $('<span>') // 创建删除按钮（叉叉）
                        .addClass('delete-btn')
                        .html('&#10006;') // Unicode 字符，表示叉叉
                        .on('pointerdown',function (e) {
                            e.stopPropagation(); // 防止点击删除按钮时触发图像的点击事件

                            // 获取删除按钮所在的父容器（图片）
                            const $deletedImageWrapper = $(this).closest('.captured-image-wrapper');

                            // 获取当前删除图片的位置（索引）
                            const deletedIndex = $deletedImageWrapper.index();

                            // 删除该图片
                            $deletedImageWrapper.remove();

                            // 获取删除图片后的所有图片，并为每一张图片添加向上移动的动画
                            const $remainingImages = $imageGallery.find('.captured-image-wrapper');

                            // 重新计算删除位置后所有图片的 top 值并执行动画
                            const moveAfterDeletePromises = $remainingImages.get().map(function (img, index) {
                                // 只有删除的图片后面的图片需要移动
                                if (index >= deletedIndex) {
                                    const currentTop = $(img).position().top || 0; // 获取当前top值，若没有则为0

                                    return new Promise(resolve => {
                                        $(img).css({
                                            'top': `${currentTop - 165}px`,  // 上移165px
                                        });

                                        // 动画结束后调用 resolve，表示当前图片动画完成
                                        resolve();
                                    });
                                }
                            });
                        })
                );



            // 创建并添加 "New" 标签
            const $newTag = $('<span>')
                .addClass('new-tag')
                .text('New')
                .css({
                    'position': 'absolute',
                    'top': '10px',
                    'left': '10px',
                    'background-color': 'rgba(0, 0, 0, 0.7)',
                    'color': '#fff',
                    'padding': '5px 10px',
                    'font-size': '14px',
                    'border-radius': '5px',
                    'font-weight': 'bold',
                    'z-index': 1
                });

            // 将 "New" 标签添加到新图像容器
            $newImage.append($newTag);

            // 将新图像容器添加到页面
            $imageGallery.prepend($newImage);

            // 为新图像添加透明度过渡效果
            setTimeout(() => {
                $newImage.find('img').css({
                    'transition': 'opacity 1s',
                    'opacity': 1  // 过渡到透明度为1
                });
            }, 50);  // 延迟一点时间以触发过渡

        }, 1000);
    });

    // 3. 启用该 div 的垂直滚动
    $imageGallery.css('overflow-y', 'scroll');
}


// 辅助函数：将 Base64 转换为 Blob 对象
function dataURItoBlob(dataURI) {
    const byteString = atob(dataURI.split(',')[1]);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);

    for (let i = 0; i < byteString.length; i++) {
        uint8Array[i] = byteString.charCodeAt(i);
    }

    return new Blob([uint8Array], { type: 'image/jpeg' });
}

// 导出模块，默认导出 captureAndUploadImage
export { captureAndUploadImage };
